<script setup>
  import { ref, onUpdated } from 'vue'
  import { useUsercodeStore } from '@/store/usercode.js'
  import { onLoad, onShow } from '@dcloudio/uni-app'
  import { http } from '@/utils/http.js'
  import square from './component/square.vue'
  import send from './component/send.vue'
  import deal from './component/deal.vue'
  import treasure from './component/treasure.vue'

  const active = ref(1)
  function changeTab(index) {
    active.value = index
  }

  function back() {
    uni.reLaunch({
      url: '/pages/home/index',
    })
  }

  const banpopup = ref()
  const tippopup = ref()
  const banTime = ref()
  async function getUserInfo() {
    const userCodeStore = useUsercodeStore()
    const res = await http.request({
      url: '/api/user/userMsg',
      method: 'POST',
      data: {},
    })
    console.log('user')
    console.log(res.data.data)
    if (res.data.data.bidding_status == 1) {
      const currentTimestamp = Math.floor(Date.now() / 1000)
      banTime.value = res.data.data.bidding_pass_time - currentTimestamp
      banpopup.value.open('center')
    } else {
      // console.log(userCodeStore.usercode.prompt)
      if (userCodeStore.usercode.prompt == 0) {
        tippopup.value.open('center')
      }
    }
  }

  //待付款
  const wait = ref(false)
  async function getDealList() {
    const res = await http.request({
      url: '/api/bidding/myParticipate',
      method: 'POST',
      data: {
        page: 1,
        limit: 10,
        keywords: '',
        status: -1,
      },
    })
    if (res.data.length) {
      wait.value = true
    } else {
      wait.value = false
    }
    console.log(wait.value)
  }

  function sure() {
    const userCodeStore = useUsercodeStore()
    if (check.value) {
      userCodeStore.setPrompt(1)
    }
    banpopup.value.close('center')
    tippopup.value.close('center')
  }
  const check = ref(false)
  function ifAgree() {
    check.value = !check.value
  }

  onLoad((option) => {
    console.log(option)
    if (option.index) {
      active.value = option.index
    }
    getUserInfo()
  })

  onShow((option) => {
    getDealList()
  })
</script>

<template>
  <view class="transition-content">
    <!-- <view class="nav-bar">
			<uni-nav-bar left-icon="left" title="交易频道" @clickLeft="back" />
		</view> -->
    <view class="choose-tab">
      <view
        class="tab-item"
        :class="{ 'tab-item-active': active == 1 }"
        @click="changeTab(1)"
      >
        交易广场
      </view>
      <view
        class="tab-item"
        :class="{ 'tab-item-active': active == 2 }"
        @click="changeTab(2)"
      >
        我的发布
      </view>
      <view
        class="tab-item"
        style="position: relative"
        :class="{ 'tab-item-active': active == 3 }"
        @click="changeTab(3)"
      >
        我的交易
        <view
          class=""
          v-if="wait"
          style="
            position: absolute;
            top: -6rpx;
            right: -4rpx;
            width: 12rpx;
            height: 12rpx;
            background-color: red;
            border-radius: 50%;
          "
        >
        </view>
      </view>
      <view
        class="tab-item"
        :class="{ 'tab-item-active': active == 4 }"
        @click="changeTab(4)"
      >
        我的货款
      </view>
    </view>
    <view class="">
      <view class="choose-content" v-if="active == 1">
        <square></square>
      </view>
      <view class="choose-content" v-if="active == 2">
        <send></send>
      </view>
      <view class="choose-content" v-if="active == 3">
        <deal @doit="getDealList"></deal>
      </view>
      <view class="choose-content" style="height: 100%" v-if="active == 4">
        <treasure></treasure>
      </view>
    </view>

    <!-- 封禁弹出层 -->
    <uni-popup ref="banpopup" type="center">
      <view class="banpopup-content">
        <image
          style="width: 288rpx; height: 288rpx"
          src="https://ojqn.wm2177.com/wechat_imgs/transition/warning.png"
          mode=""
        ></image>
        <view class="banpopup-word">
          由于您在上一次的交易中未按时付款完成交易，违背了平台商城交易的用户守则，被列入了违规名单，您已被限制参与商城交易及发布
        </view>
        <view class="less-time"> 剩余时间 </view>
        <uni-countdown
          :font-size="15"
          color="#EA0000"
          :day="Math.floor(banTime / (24 * 60 * 60))"
          :hour="Math.floor((banTime % (60 * 60 * 24)) / (60 * 60))"
          :minute="Math.floor((banTime % (60 * 60)) / 60)"
          :second="Math.floor(banTime % 60)"
          :show-colon="false"
        ></uni-countdown>
        <view class="ban-button" @click="sure"> 确认 </view>
      </view>
    </uni-popup>
    <!-- 提示弹出层 -->
    <uni-popup ref="tippopup" type="center">
      <view class="tippopup-content">
        <image
          style="width: 272rpx; height: 272rpx"
          src="https://ojqn.wm2177.com/wechat_imgs/transition/notice.gif"
          mode=""
        ></image>
        <view class="tippopup-word">
          为了保证平台商城交易的合规以及保障各位用户的权益，买家需在规定的有效期内完成支付，逾期未支付的订单自动取消，商品将流拍
          <text style="color: #ea0000"
            >且对买家进行封禁处理包括但不限于参与和发布商城交易</text
          >
        </view>
        <view class="tip-button" @click="sure"> 确认 </view>
        <view class="checked">
          <checkbox
            style="transform: scale(0.8)"
            value="cb"
            @click="ifAgree"
            :checked="check"
            activeBackgroundColor="#FFE60F"
          />
          <view>我已知晓，本次登录期间不再提示</view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<style lang="scss" scoped>
  .transition-content {
    height: 100vh;
    background-color: #f5f5f5;

    .nav-bar {
      padding-top: 86rpx;
      background-color: #fff;
      ::v-deep .uni-navbar__header {
        background-color: transparent !important;
      }
      ::v-deep .uni-navbar__content {
        background-color: transparent !important;
      }
      ::v-deep .uni-navbar--border {
        border: none !important;
      }
    }
    .choose-tab {
      height: 32rpx;
      padding: 30rpx 20rpx 42rpx 20rpx;
      display: flex;
      align-items: center;
      background-color: #fff;
      .tab-item {
        margin-right: 40rpx;
        font-size: 26rpx;
        line-height: 32rpx;
        font-weight: 700;
        &:last-child {
          margin-right: 0;
        }
      }
      .tab-item-active {
        font-size: 40rpx;
        font-weight: 700;
        &::after {
          content: '';
          display: block;
          width: 100%;
          height: 14rpx;
          background-color: $transaction-color;
        }
      }
    }
    .banpopup-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 586rpx;
      height: 672rpx;
      padding: 0 32rpx;
      box-sizing: border-box;
      border-radius: 44rpx;
      background-color: #fff;
      .banpopup-word {
        margin-bottom: 30rpx;
        font-size: 26rpx;
      }
      .less-time {
        margin-bottom: 10rpx;
        font-size: 28rpx;
        color: #9b9b9d;
      }
      .ban-button {
        width: 410rpx;
        height: 92rpx;
        border-radius: 46rpx;
        margin-top: 28rpx;
        box-sizing: border-box;
        background-color: $transaction-color;
        font-size: 32rpx;
        text-align: center;
        line-height: 92rpx;
      }
    }
    .tippopup-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 586rpx;
      height: 720rpx;
      padding: 32rpx;
      box-sizing: border-box;
      border-radius: 44rpx;
      background-color: #fff;
      .tippopup-word {
        margin-top: 24rpx;
        font-size: 26rpx;
      }

      .tip-button {
        width: 410rpx;
        height: 92rpx;
        border-radius: 46rpx;
        margin-top: 40rpx;
        box-sizing: border-box;
        background-color: $transaction-color;
        font-size: 32rpx;
        text-align: center;
        line-height: 92rpx;
      }
      .checked {
        display: flex;
        align-items: center;
        margin-top: 14rpx;
        ::v-deep uni-checkbox .uni-checkbox-input {
          border-radius: 50% !important;
        }
        view {
          font-size: 24rpx;
          color: #898989;
        }
        ::v-deep checkbox .wx-checkbox-input {
          border-radius: 50% !important;
          color: #ffffff !important;
        }

        ::v-deep checkbox .wx-checkbox-input.wx-checkbox-input-checked {
          color: #fff;
          background: $transaction-color;
        }

        ::v-deep .wx-checkbox-input.wx-checkbox-input-checked {
          border-color: $transaction-color !important;
        }
      }
    }
  }
  ::v-deep .uni-countdown__splitor {
    color: #ea0000 !important;
  }
</style>
